<template>
  <div class=''>
    <h2>动画</h2>
    <button @click = "show = !show">点我</button>
    <transition name="bounce" enter-active-class="enter" leave-active-class="leave">
      <p v-if="show">学的不仅是技术，更是梦想！！！</p>
    </transition>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
    data() {
    //这里存放数据
      return {
        show:true
      };
    },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changeAim(){
      this.isShow = !this.isShow
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
}
</script>
<style lang='scss' scoped>
.enter{
    animation: bounce-in 0.5s;
} 
.leave{
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
   0% {
       transform: scale(1);
   }
   50% {
    transform: scale(1.5);
   }
   100%{
    transform: scale(1);
   }
}

</style>